<template>
	<zero-custom-bar :effect="false" color="#000000" title='支付' backgroundColor="#F7F4F0"
		:singleIcon="true"></zero-custom-bar>

	<view class="price">
		<text class="unit">￥</text>
		<text class="amount">{{form.payAmount/100}}</text>
	</view>
	<text class="title" v-if="form.businessType==1">年检代办</text>
	<text class="title" v-if="form.businessType==2">洗车服务</text>
	<text class="title" v-if="form.businessType==3">保养服务</text>
	<text class="title" v-if="form.businessType==4">门店服务</text>
	<text class="title" v-if="form.businessType==6">代驾服务</text>
	<view class="box">
		<view class="item">
			<text class="label">订单价格</text>

			<text class="amount">￥{{form.orderAmount/100}}</text>
		</view>
		<view class="item" @click="onCoupon">
			<text class="label">优惠</text>

			<view class="right-box">
				<text class="placeholder">￥{{form.activityReduction/100}}</text>
				<image class="right" src="/static/right.png" mode=""></image>
			</view>
		</view>
	</view>
	<button class="btn" @click="submit">支付</button>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref
	} from 'vue';
	import {
		wxOpenid,
		checkLogin,
		sendCreateOrder,
		debounce
	} from '@/utils/login-sdk.js'
	var bok = true
	import {
		createOrder,
		getSignupWeixin
	} from '@/api'
	
	
	const coupon = ref([])
	onLoad(async (params) => {
		
		const {
			memberId,
			openId
		} = await wxOpenid()
		form.preOrderId = params.preOrderId
		form.businessType = params.businessType
		form.orderAmount = params.orderAmount * (params.num || 1)
		form.payAmount = params.orderAmount * (params.num || 1)
		form.openId = openId
		form.memberId = memberId
		token.value = params.token
	})
	onShow(()=>{
		uni.$on('selectCoupon',list=>{
			
			if(list&&list.length){
				coupon.value = []
				if(list[0].couponType==0){
					let sum = 0
					list.map(item=>{
						sum+=item.preAmount
						coupon.value.push(item.id)
					})
					form.activityReduction = sum
					form.payAmount = product.value.salePrice-form.activityReduction
					form.couponIds = coupon.value.toString()
				}else{
					coupon.value = [list[0].id]
					const discountValue = list[0].discountValue/10
					form.activityReduction = product.value.salePrice - (product.value.salePrice*discountValue)
					form.payAmount = product.value.salePrice-form.activityReduction
					form.couponIds=list[0].id
				}
				
			}else{
				coupon.value = []
				form.activityReduction = 0
				payAmount.value = product.value.salePrice
				form.couponIds=""
			}
		})
	})
	const token = ref()
	const form = reactive({
		"preOrderId": '', //预支付订单
		"orderAmount": '', //订单金额
		"payAmount": '', //实付金额
		"couponIds": '', //用户优惠券id串，逗号拼接
		"memberId": '', //会员ID
		"activityReduction": 0, //优惠金额
		"openId": "", //微信openId
		"storeId": '',
		"businessType": ""
	})
	/** 选择优惠券 */
	const onCoupon = () => {
		uni.navigateTo({
			url: "/pages/ccouponSelect/ccouponSelect?businessType="+form.businessType+'&orderAmount='+form.orderAmount+'&coupon='+coupon.value.toString()
		})
		
	}
	const submit = debounce(async () => {
		uni.showLoading({
			mask:true
		})
		sendCreateOrder(form, token.value)
		

	},2000)
</script>

<style lang="scss">
	page {
		background: #F7F4F0;
	}

	.price {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		text-align: center;
		line-height: 0;
		margin-top: 150rpx;
		margin-bottom: 23rpx;

		.unit {
			line-height: 1;
			color: #000;
			font-weight: bold;
			font-size: 34rpx;
			vertical-align: bottom;
			display: block;
		}

		.amount {
			line-height: 56rpx;
			color: #000;
			font-weight: bold;
			font-size: 72rpx;
			vertical-align: bottom;
			display: block;
		}
	}

	.title {
		display: block;
		text-align: center;
		font-size: 26rpx;
		color: #2B2B2B;
		margin-bottom: 113rpx;
	}

	.box {
		width: 640rpx;
		background: #FFFFFF;
		border-radius: 28rpx;
		margin: 20px auto;
		padding: 0 30rpx;

		.item {
			height: 99rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.label {
				display: block;
				font-size: 28rpx;
				color: #2B2B2B;
				width: 220rpx;
			}

			.right {
				display: block;
				width: 48rpx;
				height: 48rpx;
			}

			.amount {
				font-size: 30rpx;
				color: #2B2B2B;
			}

			.right-box {
				display: flex;
				align-items: center;

				text {
					color: #A7A7A7;
					font-size: 26rpx;
					// margin-right: 26rpx;
				}
			}
		}
	}

	.btn {
		width: 640rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #FFC53D 0%, #FE9B23 51%, #FFC53D 100%);
		box-shadow: 4rpx 12rpx 18rpx 0rpx rgba(254, 155, 35, 0.25);
		border-radius: 28rpx;
		font-weight: bold;
		font-size: 34rpx;
		color: #FFFFFF;
		line-height: 100rpx;

		position: absolute;
		bottom: 120rpx;
		left: 55rpx;

	}
</style>